<!-- 定时提醒 -->
<template>
    <div class='regularlyremind'>
        <div class="remindHead">
            <div class="remindHead_top">
                <svg class="svg-icon clock" aria-hidden="true" >
                    <use :xlink:href="icons[0]"></use>
                </svg>
                <div class="th_txt">定时提醒</div>
                <!-- 返回 -->
                <div class="returnMain">
                    <svg class="svg-icon" aria-hidden="true" title="返回主界面" @click="changeComponent">
                        <use :xlink:href="icons[1]"></use>
                    </svg>
                </div>
            </div>
            <div class="remindHead_bottom">
                <!-- 添加定时任务 -->
                <div class="add_remind_task" @click="openaddClock(true)">
                    <svg class="svg-icon add-icon" aria-hidden="true">
                        <use :xlink:href="'#' + icons[2]"></use>
                    </svg>
                </div>
            </div>
        </div>
        <!-- 定时提醒内容 -->
        <div class="remindContent">
            <!-- 定时闹钟列表 -->
            <div class="remind_card_list">
                <div class="remind_card" v-for="(item) in remindList" :key="item.remindTime">
                    <div class="remind_card_left">
                        <div class="remind_card_left_top">
                            {{ item.remindTime }}
                        </div>
                        <div class="remind_card_left_bottom">
                            {{ item.target }}
                        </div>
                    </div>
                    <div class="remind_card_right">
                        <wzc_switch class="switch" :value.sync="item.startFlag"
                        active-color="#13ce66"
                        inactive-color="#403F43" @changeSwitch="clicksaveData()" ></wzc_switch>
                    </div>
                    <!-- 删除任务 -->
                    <div class="task_card_close" @click="deleteRemindTask(item.remindTime)" title="删除闹钟">
                        <svg class="svg-icon task_card_close_icon" aria-hidden="true">
                            <use :xlink:href="'#' + icons[3]"></use>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- 占位图 -->
            <div class="remind_occ" v-show="remindList.length == 0">
                <div class="occDom_img"></div>
                <div class="occDom_txt">
                    当前你没有定时提醒，快去添加
                </div>
            </div>
        </div>

        <!-- 添加待办 -->
        <div class="absTip" v-show="absTipFlag">
            <div class="clockSet">
                <div class="need_head">
                    <div class="ntitle"> 添加闹钟 </div>
                    <div class="nclose">
                        <svg class="svg-icon" aria-hidden="true" @click="openaddClock(false)">
                            <use :xlink:href="'#' + icons[4]"></use>
                        </svg>
                    </div>
                </div>
                <div class="need_content">
                    <wzc_input class="need_task_name" placeholder="请输入时钟目的"
                    v-model="clockName" />

                    <div class="clock_time_four">
                        <input type="text" class="need_task_during_time" v-model="clockSetArr[0]" :class="{ 'hasRepeat': hasRepeat }">
                        <input type="text" class="need_task_during_time" v-model="clockSetArr[1]" :class="{ 'hasRepeat': hasRepeat }">
                        <div class="maohao">
                            :
                        </div>
                        <input type="text" class="need_task_during_time" v-model="clockSetArr[2]" :class="{ 'hasRepeat': hasRepeat }">
                        <input type="text" class="need_task_during_time" v-model="clockSetArr[3]" :class="{ 'hasRepeat': hasRepeat }">
                    </div>

                    <div class="surebtn" @click="addNewClock">
                        确定
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import wzc_input from "../input/wzc_input.vue";
import { mapState  } from 'vuex';

export default {
    name: '',
    props: {},
    data () {
        return {
            icons: ['#icon-clock_fill', '#icon-fanhui', 'icon-addition', 'icon-closefill', 'icon-chahao'],
            remindList: [
                {
                   remindTime: '00:00',  // 闹钟时间
                   startFlag: false,  // 是否启用 
                   target: '睡觉',  // 目标
                },
            ],
            absTipFlag: false,  // 添加闹钟
            clockSetArr: [0, 0, 0, 0],  // 添加的时钟时间
            clockName: '',  // 添加的时钟名称
            hasRepeat: false,  // 时间是否重复
            // currentDate: '',  // 当前时间
        };
    },
    watch:{
        // 添加时钟的时间条件判断
        clockSetArr:function(val) {
            // console.log(val)
            for(let i = 0; i < val.length; i++) {
                let item = val[i];
                if (!item) {
                    this.clockSetArr[i] = 0;
                    item = 0;
                }
                let n = parseInt(item);
                if (isNaN(n)) {
                    return ;
                } else {
                    let max = 2;
                    switch(i) {
                        case 0: max = 2; break;
                        case 1: 
                                if (this.clockSetArr[0] == 2) {
                                    max = 3;
                                } else {
                                    max = 9;
                                } break;
                        case 2: max = 5; break;
                        case 3: max = 9; break;
                    }
                    if (n > max) this.clockSetArr[i] = max; 
                    else {
                        this.clockSetArr[i] = n;
                    }
                }
            }
            let t = this.clockSetArr[0] + '' + this.clockSetArr[1] + ':' + this.clockSetArr[2] + this.clockSetArr[3];
            this.repeatDeal(t);
        },
        currentDate: function(newt) {
            console.log(newt)
            // 判断闹钟是否启动
            for(let i = 0; i < this.remindList.length; i++){
                let item = this.remindList[i];
                if (item.startFlag && item.remindTime == newt) {
                    this.notification(item.target);
                    break;
                }
            }
        }
    },
    mounted() {

        this.initGetClock();
        // 监听主进程 番茄钟任务
        window.ipcRenderer.on('remind-list', (event, arg) => {
            try {
                // console.log(arg)
                this.remindList = JSON.parse(arg);
            } catch(e) {
                this.remindList = [];
            }
        })
    },
    components: {
        wzc_switch:()=>import('../Switch/wzc-switch.vue'),
        wzc_input
    },
    methods: {
        // 获取fs文件数据
        // init初始化获取数据
        initGetClock() {
            window.ipcRenderer.send('render-msg', '获取闹钟');
        },
        // 通过window的消息通知告知闹钟响了
        notification(target){
            let options;
            options = {
                body: ``,
                icon: require('../../assets/img/icon1.png')
            }
            new Notification(`您设置的定时提醒: ${target}来了`, options);
        },
        // 添加新闹钟
        addNewClock() {
            if (!this.clockName) return ;
            let t = this.clockSetArr[0] + '' + this.clockSetArr[1] + ':' + this.clockSetArr[2] + this.clockSetArr[3];
            this.repeatDeal(t);
            if (this.hasRepeat) return ;
            

            this.remindList.push({
                remindTime: t,  // 闹钟时间
                startFlag: true,  // 是否启用 
                target: this.clockName,  // 目标
            })
            window.ipcRenderer.send('save-remind-msg', this.remindList);
            this.openaddClock(false);
        },
        // 重复
        repeatDeal(t) {
            this.hasRepeat = false;
            // 判断此时间是否存在
            for(let i = 0; i < this.remindList.length; i++) {
                let item = this.remindList[i];
                if (item.remindTime == t) {
                    this.hasRepeat = true;
                    break;
                }
            }
        },
        // 点击保存数据
        clicksaveData() {
            window.ipcRenderer.send('save-remind-msg', this.remindList);
        },
        // 添加闹钟
        openaddClock(flag) {
            if (this.absTipFlag == flag) return ;
            this.absTipFlag = flag;
        },
        // 删除闹钟
        deleteRemindTask(remindTime) {
            for(let i = 0; i < this.remindList.length; i++) {
                let item = this.remindList[i];
                if (item.remindTime == remindTime) {
                    this.remindList.splice(i, 1);
                }
            }
            window.ipcRenderer.send('save-remind-msg', this.remindList);
        },
        // 返回主界面
        changeComponent(){
            this.$parent.changeComponent(1);
        },
    },
    computed:{
        ...mapState([
            'currentDate',
        ])
    },
}

</script>
<style  lang='less' scoped>
@import url(../../assets/css/common.less);
    .regularlyremind {
        .w(100%, 100%);
        .backgroundImg('../../assets/img/main/tomato_bg4.png');
        ::-webkit-scrollbar-thumb{ 
            background-color:#999; 
            outline-offset:-2px; 
            outline:0px solid #fff; 
            border-radius:6px; 
            border: 0px solid #fff; 
            height: 50px;
            cursor: pointer;
        }
        ::-webkit-scrollbar{ 
            width:8px; 
            height:8px; 
        }
        // 顶部
        .remindHead {
            .wandh(100%, 65px);
            background: rgba(255, 255, 255, 0.3);
            .remindHead_top {
                .wandh(100%, 40px);
                display: flex;
                align-items: center;
                font-family: 'xingxing';
                box-sizing: border-box;
                .th_txt {
                    color: rgb(255,255,255,0.3);
                    font-weight: bold;
                    font-size: 25px;
                    text-shadow: rgb(24, 99, 211) 3px 3px 5px;
                    cursor: default;
                }
                // 图标
                .svg-icon {
                    .wandh(30px, 25px);
                    margin-left: 5px;
                }
                .clock {
                    fill: #fff;
                }
                // 返回主界面
                .returnMain {
                    flex: 1;
                    text-align: right;
                    margin-right: 5px;
                    .svg-icon {
                        fill: aliceblue;
                        cursor: pointer;
                        &:hover {
                            fill: #fff;
                            filter:drop-shadow(#fff 0px 0px 5px);
                        }
                    }
                }
            }
            .remindHead_bottom {
                .wandh(100%, 25px);
                display: flex;
                flex-direction: row-reverse;
                align-items: center;
                .add_remind_task {
                    margin-right: 10px;
                    .add-icon {
                        .wandh(25px, 25px);
                        fill: aliceblue;
                        cursor: pointer;
                        &:hover {
                            fill: #fff;
                            filter:drop-shadow(#fff 0px 0px 5px);
                        }
                    }
                }
            }
        }
        // 定时提醒
        .remindContent {
            .wandh(100%, calc(100% - 65px));
            overflow-y: auto;
            position: relative;
            .remind_card_list {
                .wandh(calc(100% - 60px), auto);
                margin: 0 auto;
                display: flex;
                flex-direction: column;
                .remind_card {
                    .wandh(100%, 60px);
                    background-color: rgba(0, 0, 0, 0.7);
                    border-radius: 5px;
                    margin: 10px 0px;
                    box-shadow: 0px 0px 5px #fff;
                    display: flex;
                    align-items: center;
                    color: #8C8B90;
                    position: relative;
                    .remind_card_left {
                        .w(80%, 100%);
                        .remind_card_left_top {
                            .w(calc(100% - 15px), 75%);
                            font-size: 34px;
                            padding-left: 15px;
                        }
                        .remind_card_left_bottom {
                            .w(calc(100% - 15px), 25%);
                            padding-left: 15px;
                            font-size: 13px;
                            .overhidden();
                            position: relative;
                            top: -5px;
                        }
                    }
                    .remind_card_right {
                        .w(20%, 100%);
                        display: flex;
                        align-items: center;
                    }
                    .task_card_close {
                        position: absolute;
                        top: -12px;
                        right: -12px;
                        .wandh(30px, 30px);
                        display: none;
                        z-index: 300;
                        cursor: pointer;
                        .task_card_close_icon {
                            .wandh(100%, 100%);
                            fill: #f00;
                        }
                    }
                    &:hover {
                        .task_card_close {
                            display: block;
                        }
                    }
                }
            }
            // 占位图
            .remind_occ {
                position: absolute;
                top: 0;
                left: 0;
                .w(100%, 100%);
                    .occDom_img {
                    .wandh(180px, 180px);
                    .backgroundImg('../../assets/img/icon4.gif');
                    margin: calc(50% - 120px) auto 10px;
                }
                .occDom_txt {
                    font-size: 18px;
                    text-align: center;
                    color: #fff;
                }
            }
        }

        // 添加闹钟
        .absTip {
            position: absolute;
            .wandh(100%, calc(100% - 65px));
            top: 65px;
            left: 0px;
            z-index: 100;
            background-color: rgba(255, 255, 255, 0.3);

            .clockSet {
                .wandh(300px, 260px);
                margin-top: calc(50% - 120px);  
                margin-left: calc(50% - 150px);
                background-color: #fff;
                border-radius: 20px;
                box-shadow: rgb(53, 45, 45) 10px 10px 10px;
                overflow: hidden;
                .need_head {
                    .wandh(100%, 50px);
                    background-color: rgba(97,88,88);
                    display: flex;
                    .ntitle {
                        color: #fff;
                        font-size: 18px;
                        .wandh(220px, 100%);
                        text-align: center;
                        margin-left: 40px;
                        line-height: 50px;
                    }
                    .nclose {
                        .svg-icon {
                            .wandh(20px, 20px);
                            fill: #fff;
                            position: relative;
                            top: calc(50% - 10px);
                            cursor: pointer;
                        }
                    }
                }
                .need_content {
                    .wandh(100%, calc(100% - 50px));
                    display: flex;
                    flex-direction: column;
                    .need_task_name {
                        margin: 20px auto 10px;
                    }

                    .clock_time_four {
                        margin: 0px 0px 10px;
                        height: 50px;
                        display: flex;
                        justify-content: space-around;
                        .need_task_during_time {
                            display: inline-block;
                            width: 40px;
                            height: 50px;
                            text-align: center;
                            background-color: #fff;
                            background-image: none;
                            border-radius: 4px;
                            border: 1px solid #dcdfe6;
                            box-sizing: border-box;
                            color: #606266;
                            display: inline-block;
                            font-size: 20px;
                            line-height: 40px;
                            outline: none;
                            padding: 0 5px 0 5px;
                            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
                            &.hasRepeat {
                                border-color: #f00;
                            }
                        }
                        .maohao {
                            font-size: 30px;
                            line-height: 50px;
                            color: rgb(53, 45, 45);
                        }
                    }
                    

                    .surebtn {
                        .wandh(60px, 30px);
                        margin-top: 15px;
                        align-self: center;
                        font-size: 16px;
                        border-radius: 10px;
                        text-align: center;
                        line-height: 30px;
                        color: #fff;
                        
                        background: linear-gradient(225deg, #615858, #524a4a);
                        box-shadow:  3px 3px 5px #615858, -1px -1px 5px #524a4a;
                        cursor: pointer;
                        &:hover {
                            background: linear-gradient(225deg, #524a4a, #615858);
                        }
                    }
                }
            }
        }
    }
</style>